<template>
  <div class="chat-image-message" :class="{ 'is-self': isSelf }">
    <div class="image-container" @click="handleImageClick">
      <img :src="getFullImageUrl(message.imageUrl || message.content)" :alt="'聊天图片'" />
    </div>
  </div>
</template>

<script setup>
import { ElMessageBox } from 'element-plus';
import { getFullImageUrl } from '@/utils/imageUrl';

const props = defineProps({
  message: {
    type: Object,
    required: true
  },
  isSelf: {
    type: Boolean,
    default: false
  }
});

// 处理图片点击，显示大图
const handleImageClick = () => {
  const imageUrl = getFullImageUrl(props.message.imageUrl || props.message.content);
  ElMessageBox.alert(
    `<div class="image-preview-container">
      <img src="${imageUrl}" alt="图片预览" style="max-width: 100%; max-height: 80vh;" />
    </div>`,
    '图片预览',
    {
      dangerouslyUseHTMLString: true,
      showConfirmButton: false,
      closeOnClickModal: true,
      customClass: 'image-preview-dialog'
    }
  );
};
</script>

<style lang="scss" scoped>
.chat-image-message {
  max-width: 250px;
  
  .image-container {
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
    }
  }
  
  &.is-self {
    margin-left: auto;
    
    .image-container {
      background-color: #ecf5ff;
    }
  }
}

:deep(.image-preview-dialog) {
  max-width: 90vw;
  
  .el-message-box__content {
    overflow: auto;
    text-align: center;
  }
}
</style> 